<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/index/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/index/css/LArea.min.css"/>
    <script type="text/javascript" src="__STATIC__/index/js/rem.js"></script>
    <title>特许加盟</title>
</head>
<body class="whiteBg">
<div class="join">
    <!--表单-->
    <div class="form_join">
        <!--联系人-->
        <div class="form_list smoth super-text">
            <span class="bold">联系人</span>
            <input id="name" type="text" name="name" placeholder="请输入您的姓名"/>
        </div>
        <!--手机号-->
        <div class="form_list smoth super-text">
            <span class="bold">手机号</span>
            <input id="phone" type="tel" name="phone" placeholder="请输入您的手机号" maxlength="11"/>
        </div>
        <!--选择地区-->
        <div class="form_list smoth super-text">
            <span class="bold">所在地区</span>
            <input type="text" id="ipt" name="area" placeholder="请选择您的所在地区" readonly=""/>
            <input type="hidden" id="value2"/>
            <input type="hidden" id="default">
            <i class="form_arrow"></i>
        </div>
        <!--详细地址-->
        <div class="form_list smoth super-text">
            <span class="bold">详细地址</span>
            <input id="address" type="text" name="address" placeholder="请填写详细地址"/>
        </div>
    </div>
    <!--上传证件照-->
    <div class="join_upload">
        <form class="identity">
            <p class="bold smoth super-text">上传身份证</p>
            <div class="id clear">
                <!--正面照-->
                <div class="id_front id_img fl">
                    <img class="auto-img" id="front" src="__STATIC__/index/img/id_front.png"/>
                    <input type="hidden" name="id_img1" id="id_front" class="front"/>
                    <div style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 999;"></div>
                </div>
                <!--背面照-->
                <div class="id_back id_img fr">
                    <img class="auto-img" id="back" src="__STATIC__/index/img/id_back.png"/>
                    <input type="hidden" name="id_img2" id="id_back" class="back"/>
                    <div style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 999;"></div>
                </div>
            </div>
        </form>
    </div>
    <!--上传营业执照-->
    <div class="license">
        <form class="license_form">
            <p class="smoth super-text bold">上传营业执照</p>
            <div class="result" id="result">
                <div class="default_img">
                    <img class="auto-img hoverImg" src="__STATIC__/index/img/licenese.png"/>
                    <input class="topPhoto" type="hidden" name="licence" id="topPhoto"/>
                </div>
            </div>
        </form>
    </div>
    <div class="post_now">
        <button>立即申请</button>
    </div>
</div>
<script type="text/javascript" src="__STATIC__/index/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="__STATIC__/index/js/LArea.js"></script>
<script type="text/javascript" src="__STATIC__/index/js/LAreaData1.js"></script>
<script type="text/javascript" src="__STATIC__/index/js/LAreaData2.js"></script>
<script type="text/javascript" src="__STATIC__/index/js/layer/layer.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
    //匹配iOS 失去焦点
    $("#ipt").focus(function () {
        document.activeElement.blur();
    });
    var area = new LArea();
    area.init({
        'trigger': '#ipt',
        'valueTo': '#value2',
        'defaultval': '#default',
        'keys': {
            id: 'value',
            name: 'text'
        },
        'type': 2,
        'data': [provs_data, citys_data, dists_data]
    });
    area.value = [18, 0, 3];


    //定义上传图片张数
    var imgcount = 0;
    // JSSDK 配置参数
    wx.config({$jsSign|raw});
    // JSSDK 初始化成功
    wx.ready(function () {
        $('.id_front').click(function () {
            wx.chooseImage({
                count: 1, // 默认9
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                    localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                    $('#front').attr('src', localIds);
                    wx.uploadImage({
                        localId: localIds.toString(), // 需要上传的图片的本地ID，由chooseImage接口获得
                        isShowProgressTips: 1, // 默认为1，显示进度提示
                        success: function (res) {
                            serverId = res.serverId; // 返回图片的服务器端ID
                            $("input[name='id_img1']").val(serverId);
                        }
                    });
                }
            });
        });

        $('.id_back').click(function () {
            wx.chooseImage({
                count: 1, // 默认9
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                    localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                    $('#back').attr('src', localIds);
                    wx.uploadImage({
                        localId: localIds.toString(), // 需要上传的图片的本地ID，由chooseImage接口获得
                        isShowProgressTips: 1, // 默认为1，显示进度提示
                        success: function (res) {
                            serverId = res.serverId; // 返回图片的服务器端ID
                            $("input[name='id_img2']").val(serverId);
                        }
                    });
                }
            });
        });

        $('.default_img').click(function () {
            var localIds = [];
            wx.chooseImage({
                count: (3-imgcount), // 默认9
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function(res) {
                    localIds = res.localIds;
                    syncUpload();
                }
            });
            function syncUpload() {
                if (!localIds.length) {
                    // alert('上传成功!');
                } else {
                    var localId = localIds.shift();
                    wx.uploadImage({
                        localId: localId,
                        success: function(res) {
                            // alert(localId);
                            $('.default_img').before('<div class="remove_img" id="remove_img"><i class="close"></i><img class="auto-img" togy="'+res.serverId+'" src="' + localId + '" /></div>');
                            imgcount++;
                            if (imgcount > 2) {
                                $('.default_img').hide();
                            }
                            syncUpload();
                        }
                    });
                }
            }
        });
    });

    $('.result').on('click','.close',function () {
        $(this).parents('.remove_img').remove();
        imgcount--;
        if (imgcount < 3) {
            $('.default_img').css({'display': 'inline-block'});
        }
    });


    //点击立即申请按钮
    $('.post_now').on('click', function () {
        var name = $('#name').val();
        var phone = $('#phone').val();
        var area = $('#ipt').val();
        var address = $('#address').val();
        var id_img1 = $('#id_front').val();
        var id_img2 = $('#id_back').val();
        var thumb = '';
        $('.remove_img').each(function () {
            thumb+='|'+$(this).children('img').attr('togy');
        });
        if ($('#name').val() == '') {
            layer.msg('联系人不能为空', {time: 1000})
        } else if ($('#phone').val() == '') {
            layer.msg('手机号码不能为空', {time: 1000})
        } else if (!is_phone(phone)) {
            layer.msg('手机号码不正确', {time: 1000})
        } else if ($('#ipt').val() == '') {
            layer.msg('所在地区不能为空', {time: 1000})
        } else if ($('#address').val() == '') {
            layer.msg('详细地址不能为空', {time: 1000})
        } else if ($('#id_front').val() == '') {
            layer.msg('请上传身份证正面照', {time: 1000})
        } else if ($('#id_back').val() == '') {
            layer.msg('请上传身份证背面照', {time: 1000})
        } else if (thumb=='') {
            layer.msg('请上传营业执照', {time: 1000})
        } else {
            $('.post_now button').attr('disabled',true);
            $.ajax({
                url:"",
                type:"POST",
                data:{name:name,phone:phone,area:area,address:address,id_img1:id_img1,id_img2:id_img2,thumb:thumb.substr(1)},
                success:function (res) {
                    if (res=='ok'){
                        window.location.href = 'postSuccess'
                    }else if(res=='error'){
                        layer.msg('提交失败',{icon:0},function () {
                            $('.post_now button').attr('disabled',false);
                        })
                    }else if(res=='nomore'){
                        layer.msg('您已提交过申请',{icon:0},function () {
                            $('.post_now button').attr('disabled',false);
                        })
                    }
                }
            })
        }
    })


    //验证是否为手机号码
    function is_phone(phone) {
        var myreg = /^1(3|4|5|7|8)\d{9}$/;
        if (!myreg.test(phone)) {
            return false;
        }
        return true;
    }
</script>
</body>
</html>